<template>
  <div class="flexbox com_box">
    <div class="person_job " v-loading="m_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="person_btn flexbox  flexbetween flexcenter ">
            <el-input placeholder="品牌搜索" clearable prefix-icon="el-icon-search" v-model="catalogQuery"></el-input>
            <el-tooltip content="添加品牌" placement="top">               
             <img src="@/assets/img/Icon-add.svg" alt="" class="market_icon" @click="openBrand">
            </el-tooltip>
        </div>
        <el-tree ref="tree" accordion :expand-on-click-node='true' :data="filteredData(catalogQuery,catalogData)" highlight-current :current-node-key="currentNodekey" @node-click="getTreeData" class="part_tree" node-key="id" :default-expanded-keys="isOpen" :props="defaultProps">
            <div class="flexbox flexcenter flexbetween custom-tree-node" slot-scope="{ node }">
                <div class="part_left flexbox flexcenter">
                    <img src="../../assets/img/tree_icon.svg" alt="" class="tree_icon" v-if="node.level==1">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" v-else-if="node.level==2">
                        <path d="M1.99997 4.33333C1.99997 3.8731 2.37307 3.5 2.8333 3.5H7.91666L9.99999 6H17.0833C17.5436 6 17.9167 6.37308 17.9167 6.83333V16.1667C17.9167 16.6269 17.5436 17 17.0833 17H2.8333C2.37307 17 1.99997 16.6269 1.99997 16.1667V4.33333Z" fill="#95A5C9" fill-opacity="0.5" stroke="#95A5C9" stroke-linejoin="round" />
                        <path d="M16.5 10H3.5" stroke="white" stroke-width="1.6" stroke-linejoin="round" />
                    </svg>
                    <span class="circle_mt" v-else-if="node.level==4"></span>
                    
                    <el-tooltip :content="node.label" :ref="'isTooltip' + node.id" placement="top" :disabled="filterTooltip(node.id)">  
                        <span class="tree_title" :ref="'isOverflow' + node.id" >{{node.label}}</span>
                    </el-tooltip>
                    <el-tooltip content="添加产品" placement="top" >  
                        <svg class="tree_add_icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" @click.stop="openProduct(node)">
                            <rect width="20" height="20" rx="3.75" fill="#E8EAEC"/>
                            <path d="M3.75 10H16.25" stroke="#ACB2BB" stroke-width="1.71429" stroke-linecap="round"/>
                            <path d="M10 16.25L10 3.75" stroke="#ACB2BB" stroke-width="1.71429" stroke-linecap="round"/>
                        </svg>
                    </el-tooltip>
                </div>
            </div>
        </el-tree>
    </div>
    <div class="flex R_box">
        <div class="R_header flexbox flexbetween flexcenter"  >
            <!-- :style="selectData.length > 0?'padding:16px 20px':''" -->
            <template >
                <div>分镜素材</div>
                <div class="flexbox flexcenter" @click="addVedio">
                    <div class="up-btn flexbox flexcenter"> 
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M10.8333 4.79134C10.8333 4.3311 10.4602 3.95801 9.99998 3.95801C9.53974 3.95801 9.16665 4.3311 9.16665 4.79134V9.16634H4.79165C4.33141 9.16634 3.95831 9.53944 3.95831 9.99967C3.95831 10.4599 4.33141 10.833 4.79165 10.833H9.16665V15.208C9.16665 15.6682 9.53974 16.0413 9.99998 16.0413C10.4602 16.0413 10.8333 15.6682 10.8333 15.208V10.833H15.2083C15.6686 10.833 16.0416 10.4599 16.0416 9.99967C16.0416 9.53944 15.6686 9.16634 15.2083 9.16634H10.8333V4.79134Z" fill="white"/>
                        </svg> 
                        <span >上传素材</span>
                    </div>
                </div>
            </template>
            <!-- <template v-else>
                <div class="select_title flexbox flexcenter flexbetween">
                    <div class="flexbox select_btn">
                        <div>已选<span style="color: #165DFF"> {{ selectData.length }} </span>项</div>
                        <div @click="$refs.storyVideo.keepWorkspace('',true),$refs.storyVideo.clearSelect()">添加到工作台</div>
                        <div @click="copyJyUrl">复制到剪映</div>
                        <div @click="AddTag">标签设置</div>
                        <div @click="deldialogVisible= true">删除</div>
                    </div>
                    <div @click="$refs.storyVideo.clearSelect()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M17.2542 8.25451C17.6708 7.83795 17.6708 7.16257 17.2542 6.74601C16.8376 6.32945 16.1623 6.32945 15.7457 6.74601L12 10.4918L8.2542 6.74601C7.83764 6.32945 7.16227 6.32945 6.74571 6.74601C6.32915 7.16257 6.32915 7.83795 6.74571 8.25451L10.4915 12.0003L6.74571 15.746C6.32915 16.1626 6.32915 16.8379 6.74571 17.2545C7.16227 17.6711 7.83764 17.6711 8.2542 17.2545L12 13.5088L15.7457 17.2545C16.1623 17.6711 16.8376 17.6711 17.2542 17.2545C17.6708 16.8379 17.6708 16.1626 17.2542 15.746L13.5084 12.0003L17.2542 8.25451Z" fill="#ACB2BB"/>
                        </svg>
                    </div>
                </div>
            </template> -->
        </div>
        <!-- 筛选-搜索 -->
        <HeaderSearch @getList="getMaterialList" :queryInfo="queryInfo"  v-show="selectData.length == 0"/>
        <div  v-show="selectData.length != 0" class="flexbox flexcenter flexbetween" style="height: 58px">
            <div class="select_title_new flexbox flexcenter flexbetween" >
                <div class="flexbox select_btn">
                    <div style="padding: 4px 0">已选<span style="color: #165DFF"> {{ selectData.length }} </span>项</div>
                    <div class="btn_box flexbox flexcenter font_weight_500" @click="copyJyUrl"> <img src="@/assets/img/JY_icon.svg" alt=""> 复制到剪映</div>
                    <div class="btn_box flexbox flexcenter font_weight_500" ><img src="@/assets/img/tag_icon.svg" alt=""> 
                            <el-dropdown  trigger="click"  @command="handleCommand">
                                  <span class="el-dropdown-link">
                                    标签设置<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <!-- <el-dropdown-item command="brand">品牌标签</el-dropdown-item> -->
                                    <el-dropdown-item command="material">素材标签</el-dropdown-item>
                                    <el-dropdown-item command="product" v-if="queryInfo.product_id != 0">产品标签</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                    </div>
                    <div class="btn_box flexbox flexcenter font_weight_500" @click="$refs.storyVideo.keepWorkspace('',true),$refs.storyVideo.clearSelect()"><img src="@/assets/img/work_icon.svg" alt=""> 临时添加</div>
                    <div class="btn_box flexbox flexcenter font_weight_500" @click="$refs.KeepWork.keepWorkspace(selectData)"><img src="@/assets/img/work_icon.svg" alt=""> 存档添加</div>
                    <div class="btn_box flexbox flexcenter font_weight_500" @click="deldialogVisible= true"> <img src="@/assets/img/del_icon.svg" alt="">删除</div>
                </div>
                <div @click="$refs.storyVideo.clearSelect()" class="clear_btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M17.2542 8.25451C17.6708 7.83795 17.6708 7.16257 17.2542 6.74601C16.8376 6.32945 16.1623 6.32945 15.7457 6.74601L12 10.4918L8.2542 6.74601C7.83764 6.32945 7.16227 6.32945 6.74571 6.74601C6.32915 7.16257 6.32915 7.83795 6.74571 8.25451L10.4915 12.0003L6.74571 15.746C6.32915 16.1626 6.32915 16.8379 6.74571 17.2545C7.16227 17.6711 7.83764 17.6711 8.2542 17.2545L12 13.5088L15.7457 17.2545C16.1623 17.6711 16.8376 17.6711 17.2542 17.2545C17.6708 16.8379 17.6708 16.1626 17.2542 15.746L13.5084 12.0003L17.2542 8.25451Z" fill="#ACB2BB"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- video列表 -->
        <template>
            <StoryVideoVue :videoList="videoList" @selectVideo="getVideoList" ref="storyVideo" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)"/>
        </template>

       <!-- 工作台组件 -->
       <Staging />

       <!-- 分页 -->
       <div class="page_box flexbox flexcenter" >
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[50, 100]" :total="total">
            </el-pagination>
        </div>
    </div>
    <AddstageVideo/>
    <LabelSettingDialog :taglist="tag_list" ModuleName="fenjin" ref="labelsetting" />
    <SumbitDialog 
        class="deldialog"
        width="400px"
        :dialogVisible.sync="deldialogVisible"
        sumbitColor="#F53F3F"
        sumbitText="确定删除"
        @onSubmit="del_FJ">
        <svg slot="title" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.4136 4.86706C15.3549 3.04431 12.6451 3.04431 11.5864 4.86706L3.85967 18.17C2.82129 19.9577 4.15529 22.1667 6.27331 22.1667H21.7267C23.8447 22.1667 25.1787 19.9577 24.1403 18.17L16.4136 4.86706ZM14 8.16667C13.4201 8.16667 12.95 8.63096 12.95 9.2037V15.4259C12.95 15.9987 13.4201 16.463 14 16.463C14.5799 16.463 15.05 15.9987 15.05 15.4259V9.2037C15.05 8.63096 14.5799 8.16667 14 8.16667ZM14 17.5C13.4201 17.5 12.95 17.9643 12.95 18.537C12.95 19.1098 13.4201 19.5741 14 19.5741C14.5799 19.5741 15.05 19.1098 15.05 18.537C15.05 17.9643 14.5799 17.5 14 17.5Z" fill="#F53F3F"/>
        </svg>
        <div class="dioalog_text">确认要删除，删除后将无法恢复！</div>
    </SumbitDialog>
    <SumbitDialog
        class="savedialog"
        width="400px"
        :dialogVisible.sync="dialogVisible"
        sumbitColor="#165DFF"
        sumbitText="保存"
        @onSubmit="saveProduct">
        <div slot="title">{{DialogText}}</div>
        <div style="color: #5C636C;margin-bottom: 16px;">请确认名称正确后添加，添加后不可修改和删除。</div>
        <el-input :placeholder="`请输入${DialogText.slice(2,4)}名称`" v-model="ProductName"></el-input>
    </SumbitDialog>
    <!-- 存档添加 -->
    <KeepWork ref="KeepWork"/>
    <LabelDialog 
            ref="labelporduct" 
            ReqUrl="/adminapi/Materialfj/tagAdd" 
            :taglist="Typetaglist" 
            TagType="3" 
            :ProductId="queryInfo.product_id" 
            @getTagList="(query)=>{getNewTagList(query,3)}"
            @submitForm="submitDataForm"/>
  </div>
</template>

<script>
import KeepWork from './components/KeepWork';
import StoryVideoVue from './components/StoryVideo';
import Staging from './components/Staging';
import AddstageVideo from "./components/AddstageVideo";
import HeaderSearch from "./components/headerSearch";
import SumbitDialog from "@/components/components/SumbitDialog"
import LabelSettingDialog from "@/components/LabelSettings/index";
import LabelDialog from "@/components/components/LabelDialog";
export default {
  data() {
    return {
        tagType:"",
        videoList:[],
        selectData:[],
        deldialogVisible:false,
        m_loading:false,
        loading:false,
        catalogQuery:"",
        catalogData: [], //目录列表
        currentNodekey:0,
        isOpen: [0],
        catalogueInfo: {
            channel: 1,
            soure_type: 2,
        },
        defaultProps: {
            children: "next",
            label: "name",
        },
        ProductName:"",
        DialogText:"",
        dialogVisible:false,
        total: 0,
        queryInfo: {
            page: 1,
            limit: 50,
            query: "",
            product_id:"",
            // tag: [],
            date:[],
            mater_tag:{
                tag_type:2,
                tag:[]
            },
            product_tag:{
                tag_type:2,
                tag:[]
            },
            // tag_type:2,
            photographer_uid:"",
            is_favorite:2,
            field:'video_id',
            order:'desc'
        },
        tag_list:[],
        Typetaglist:[]
    };
  },
  components:{
    StoryVideoVue,
    Staging,
    AddstageVideo,
    HeaderSearch,
    SumbitDialog,
    LabelSettingDialog,
    KeepWork,
    LabelDialog
  },
  created() {
    this.videoList = []
  },
  mounted() {
    this.getCatalogueList()
    this.getMaterialList()
    this.getTagList()
  },
  methods: {
    async AddProductTag(){
        await this.getNewTagList(undefined,3);
            this.$nextTick(()=>{
                this.$refs.labelporduct.openDialog();
                this.$refs.labelporduct.selectTag(this.Typetaglist[0]) 
            })
    },
    async submitDataForm(addMtInfoForm){
        const { data: res } = await this.$http.post("adminapi/Materialfj/materialEditTagAll",{
            video_id:this.selectData.map(e=>e.video_id),
            tag_id:addMtInfoForm.map(e=>e.id),
            tag_type:3
          });
            if (res.code !== 200) {
                return this.$message.error(res.msg);
            } else {
               this.$nextTick(()=>{
                this.$message.success('保存成功');
                this.$refs.labelporduct.closeDialog();
                this.$refs.labelporduct.loading = false;
                 this.$refs.storyVideo.clearSelect();
              })
            }
    },
     async getNewTagList(query,tag_type) {
            const { data: res } = await this.$http.post(
                "adminapi/materialfj/tagList",
                {
                    page: 1,
                    limit: 0,
                    query:query?query:undefined,
                    tag_type:tag_type,
                    product_id:this.queryInfo.product_id?this.queryInfo.product_id:undefined
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
              this.Typetaglist = res.data.list;
            }
        },
    handleCommand(type){
        switch (type) {
            case 'brand':
                
                break;
            case 'product':
                this.AddProductTag();
                break;
            case 'material':
                this.AddTag();
                break;
            default:
                break;
        }
    },
    // 获取标签
    async getTagList(query) {
            const { data: res } = await this.$http.post(
                "adminapi/materialfj/tagList",
                {
                    page: 1,
                    limit: 0,
                    query:query?query:undefined,
                    tag_type:1
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
              this.tag_list = res.data.list;
            }
        },
        // 删除分镜素材
    async del_FJ(){
        console.log( this.selectData)
         const { data: res } = await this.$http.post(
                "adminapi/materialfj/materialDelete",
                {
                   list:this.selectData.map(e=>e.video_id)
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
              this.$message.success('删除分镜视频成功！');
              this.$refs.storyVideo.clearSelect()
              this.deldialogVisible = false;
              this.getMaterialList();
            }
    },
    async AddTag(){
        await this.getTagList();
        this.$nextTick(()=>{
            this.$refs.labelsetting.videoId =  this.selectData.map(e=>e.video_id);
            this.$refs.labelsetting.openDialog();
            this.$refs.labelsetting.selectTag(this.tag_list[0]);
        })
    },
    filterTooltip(id){
        setTimeout(()=>{
            let cWidth = this.$refs['isOverflow'+id].clientWidth;
            let sWidth = this.$refs['isOverflow'+id].scrollWidth;
            if (sWidth > cWidth) { //超过
                this.$refs['isTooltip'+id].disabled = false;
            } else {
                this.$refs['isTooltip'+id].disabled = true;
            }
        },50)
    },
    copyJyUrl(){
        let url_arr ="";
        this.selectData.forEach(e=>{
            if(e.on_nas){
                //\\\\192.168.10.29\\MorphlingV4\\分镜素材库\\
             url_arr += `"${e.material_name}.${e.file_format}"`;
            }else{
                setTimeout(()=>{
                    this.$message.error('复制失败:'+ e.material_name + '未找到对应文件')
                },60)
            }
        })
        if(!url_arr)return;
        const input = document.createElement('input');
        input.value = url_arr;
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy');
        document.body.removeChild(input);
        setTimeout(()=>{
            this.$message.success('复制成功')
        },50)
    },
     // 目录筛选
        filteredData(query, list) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.name.indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
    },
    getVideoList(val){
        this.selectData = val;
        console.log(this.selectData,'------------------getvideolist')
    },
    addVedio() {
        const attr = {
            dialogVsb: true,
        };
        this.$bus.emit("addVedio", attr);
    },
    getMaterialList(){
        this.loading = true;
        let that = this;
        if (that.source) {
            that.source();
        }
        this.videoList = [];
        this.$http.post("adminapi/materialfj/materialList",this.queryInfo,{cancelToken: new axios.CancelToken(function executor(c) {that.source = c;})})
        .then((res) => {
            if (res.data.code == 200) {
                this.total = res.data.data.count;
                this.videoList = res.data.data.list;
                this.loading = false;
            }
        });
    },
    openProduct(item){
        
        console.log()
        this.ProductName = "";
        this.dialogVisible = true;
        this.DialogText='添加产品';
        this.Product_data = item.data;
    },
    openBrand(){
        this.ProductName = "";
        this.dialogVisible = true;
        this.DialogText='添加品牌';
    },
    saveProduct(){
        if(!this.ProductName.trim())return this.$message.error(`请输入${this.DialogText.slice(2,4)}名称`);
        if(this.DialogText == '添加产品'){
            let p_id = this.Product_data.pid ? this.Product_data.pid : this.Product_data.id
            this.$http.post("adminapi/materialfj/productAdd",{
                name:this.ProductName,
                pid: p_id
                })
            .then((res) => {
                if (res.data.code == 200) {
                    this.isOpen = [p_id]
                    this.currentNodekey = this.Product_data.id
                    this.getCatalogueList()
                    this.dialogVisible = false;
                    return this.$message.success('添加成功');
                }
                this.$message.error(res.data.msg)
            });
        }else{
            this.$http.post("adminapi/materialfj/brandAdd",{name:this.ProductName})
            .then((res) => {
                if (res.data.code == 200) {
                    // this.isOpen = [this.Product_data.pid]
                    console.log(this.isOpen)
                    this.getCatalogueList()
                    this.dialogVisible = false;
                    return this.$message.success('添加成功');
                }
                this.$message.error(res.data.msg)
            });
        }
    },
    async getCatalogueList() {
            this.m_loading = true;
            const { data: res } = await this.$http.post("adminapi/materialfj/bpList");
            if (res.code !== 200) {
                this.m_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.m_loading = false;
                let arrText = {
                    brand_id: "",
                    name: "全部",
                    next: [],
                    id:0
                };
                if (res.data.length > 0) {
                    res.data.unshift(arrText);
                }
                this.catalogData = res.data;
            }
        },
        // 树形节点点击
        getTreeData(data) {
            console.log(data)
            if (!data.next) {
                this.queryInfo.page = 1;
                this.queryInfo.product_id = data.id;
                this.getMaterialList();
            }else if(data.next.length == 0){
                this.queryInfo.page = 1;
                this.queryInfo.product_id = data.id;
                this.getMaterialList();
            }
            this.$refs.storyVideo.clearSelect();
        },
        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.$refs.storyVideo.clearSelect()
            this.selectData = [];
            this.getMaterialList();
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.queryInfo.page = val;
            this.$refs.storyVideo.clearSelect()
            this.selectData = [];
            this.getMaterialList();
        },
  },
};
</script>

<style scoped>
.dioalog_text{
    margin: 20px 0;
}
.R_video_content{
    height: calc(100vh - 324px);
}
.sch_box {
    /* padding-left:12px; */
    /* height: 57px;    */
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 0 13px 12px;
    border-bottom: 1px solid #E8EAEC;
}
.savedialog /deep/ .dialog-content{
    margin:16px 0;
}
/deep/ .el-input__inner{
    height: 36px;
    line-height:36px;
    border-radius: 8px;
}
/deep/ .el-pagination    .el-input__inner{
    height: 28px;
    line-height: 28px;
}
.part_tree /deep/ .el-tree-node__content {
    height: 48px;
    position: relative;
}
.part_tree /deep/ .el-tree-node__expand-icon {
    color: #616C85;
    margin-left: 15px;
}
.part_tree /deep/ .el-tree-node__expand-icon.is-leaf {
    color: transparent;
}
.part_tree /deep/ .el-tree-node__content:hover {
    background-color: #f6f8ff;
}
/deep/ .material_select.el-select .el-input .el-input__inner {
    border-color: #F7F9FF;
    background-color: #F7F9FF;
    padding-left: 44px;
}
/deep/ .material_select.el-select .el-input__prefix {
    display: flex;
    align-items: center;
    left: 12px;
}
.part_tree /deep/ .el-tree-node__content:hover  .tree_add_icon{
    display: inline-block;
}
.part_tree /deep/ .el-tree-node__content:hover .tree_add_icon:hover rect{
    fill:#E8EAEC;
}
.part_tree /deep/ .el-tree-node__children .el-tree-node__content:hover .tree_add_icon{
    display: none;
    fill:none;
}

.tree_add_icon{
    position: absolute;
    display:none;
    right: 20px;
}
.tree_add_icon rect{
    fill:none;
}
.part_tree{
    border-top: 1px solid #E8EAEC;
}
.person_job {
    flex-basis: 208px;
    border-right: 1px solid #E8EAEC;
    overflow-y: hidden;
    flex-shrink: 0;
}
.custom-tree-node {
    height: 48px;
}
.circle_mt{
    width: 4px;
    height: 4px;
    background-color: #616C85;
    border-radius: 50%;
}
.tree_title {
    font-size: 14px;
    color: #17233d;
    margin-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100px;
}
.person_btn {
    gap: 6px;
    padding: 20px;
}
.person_btn img{
    cursor: pointer;
}
.person_btn >>> .el-input__inner{
    height: 32px;
    line-height: 32px;
}
.person_btn >>> .el-input__icon{
    line-height: 32px;
}
.R_header{
    padding: 18px 20px;
    border-bottom: 1px solid #E8EAEC;
}

.select_title_new{
    width: 100%;
    border-radius: 12px;
    height: 40px;
    font-size: 14px;
    background: #F8F8F9;
    padding: 0 36px 0 20px;
    margin: 0px 36px 0 20px;
}    

.select_title{
    border-radius: 12px;
    height: 40px;
    font-size: 14px;
    width: 100%;
    background: #F8F8F9;
    padding: 0 36px 0 20px;
}
.select_title div:nth-child(2){
    cursor: pointer;
}
.select_title div:nth-child(3){
    margin-right: 16px;
}
.select_title div:nth-child(4){
    margin-right: 16px;
}
.select_title div:nth-child(5){
    cursor: pointer;
}
.select_btn {
    color: #5C636C;
}
.clear_btn{
    cursor: pointer;
    height: 24px;
}
.clear_btn:hover{
    border-radius: 6px;
    background: #E8EAEC !important;
}
.select_btn .btn_box{
    gap: 2px;
    padding: 4px;
    cursor: pointer;
    margin-right: 12px;
}
.select_btn .btn_box:hover{
    padding: 4px;
    border-radius: 6px;
    background: #E8EAEC !important;
}
.select_btn div:nth-child(1)::after{
    display: inline-block;
    content: "";
    margin: 0 12px;
    width: 1px;
    height: 12px;
    background: #D7DADE;
}
/* .select_btn div:nth-child(2){
    cursor: pointer;
    margin-right: 16px;
}
.select_btn div:nth-child(3){
    cursor: pointer;
}
.select_btn div:nth-child(4){
    cursor: pointer;
} */
.up-btn{
    width: 96px;
    padding-right: 4px;
    margin-left: 10px;
    border-radius: 8px;
    line-height: 36px;
    font-size: 14px;
    color: #FFF;
    cursor: pointer;
    justify-content: center;
    flex-shrink: 0;
    background-color: #165DFF;
}
</style>